<template>
  <div class="draggable-box">
    <draggable
      v-for="chart in comps"
      :key="chart.id"
      :w="chart.w"
      :h="chart.h"
      :x="chart.x"
      :y="chart.y"
      :parent="true"
      :debug="false"
      :min-width="100"
      :min-height="100"
      :isConflictCheck="true"
      :snap="true"
      :snapTolerance="1"
      :active.sync="chart.active"
      @refLineParams="getRefLineParams"
      @dragging="onDrag"
      @resizing="onResize"
    >
      <div :id="chart.comp" :is="compsMap[chart.comp]"></div>
    </draggable>

    <!--辅助线-->
    <span
      class="ref-line v-line"
      v-for="item in vLine"
      :key="item.id"
      v-show="item.display"
      :style="{
        left: item.position,
        top: item.origin,
        height: item.lineLength,
      }"
    />
    <span
      class="ref-line h-line"
      v-for="item in hLine"
      :key="item.id"
      v-show="item.display"
      :style="{
        top: item.position,
        left: item.origin,
        width: item.lineLength,
      }"
    />
    <!--辅助线END-->
  </div>
</template>

<script>
import draggable from "@/components/draggable/index.vue";
import Bar from "@/components/charts/bar.vue";
import Line from "@/components/charts/line.vue";
import Pie from "@/components/charts/pie.vue";

export default {
  name: "app",
  components: {
    draggable,
  },
  data() {
    return {
      vLine: [],
      hLine: [],
      compsMap: {
        Bar,
        Line,
        Pie,
      },
      comps: [],
    };
  },
  created() {
    let charts = this.getStorage("charts");
    if (!charts || !JSON.parse(charts).length) {
      this.comps = [
        {
          id: "8382385742123141421",
          comp: "Bar",
          active: false,
          w: 500,
          h: 500,
          x: 0,
          y: 0,
        },
        {
          id: "83048572961123534223",
          comp: "Line",
          active: false,
          w: 500,
          h: 500,
          x: 500,
          y: 0,
        },
        {
          id: "93479257691231442131",
          comp: "Pie",
          active: false,
          w: 500,
          h: 500,
          x: 1000,
          y: 0,
        },
      ];
      return this.setStorage("charts", this.comps);
    }
    this.comps = JSON.parse(charts);
  },
  methods: {
    setStorage(key, val) {
      localStorage.setItem(key, JSON.stringify(val));
    },
    getStorage(key) {
      return localStorage.getItem(key);
    },
    // 辅助线回调事件
    getRefLineParams(params) {
      const { vLine, hLine } = params;
      let id = 0;
      this.vLine = vLine.map((item) => {
        item["id"] = ++id;
        return item;
      });
      this.hLine = hLine.map((item) => {
        item["id"] = ++id;
        return item;
      });
    },
    onResize: function (x, y, width, height) {
      this.$store.dispatch("RESIZE", new Date().getTime());
      this.changeChart(x, y, width, height);
    },
    onDrag: function (x, y) {
      this.changeChart(x, y);
    },
    changeChart(x, y, w, h) {
      let charts = JSON.parse(localStorage.getItem("charts") || "[]");
      this.comps.forEach((c, i) => {
        if (c.active) {
          charts[i].x = x || charts[i].x;
          charts[i].y = y || charts[i].y;
          charts[i].w = w || charts[i].w;
          charts[i].h = h || charts[i].h;
          this.setStorage("charts", charts);
        }
      });
    },
  },
};
</script>

<style scoped>
.draggable-box {
  min-height: calc(100vh - 100px);
  width: 100%;
  border: 1px solid #4200f7;
  position: relative;
  top: 0;
  left: 0;
  bottom: 0;
  margin: 0 auto;
}
</style>